<!-- Раздел вебкам-моделей. Сайт может переопределить страницу, чтобы подключить
свою статистику к событиям `model-click` / `model-view` у `ViewWebcams`. -->
<template>
  <div>
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs _container"
    />

    <ViewWebcams
      :data="data"
      :status="status"
      :h1="h1"
      :tag="tag"
      :models-total="modelsTotal"
    />

    <SectionSeoText
      :text="t('webcams_footer_text')"
      class="webcams__seo _container"
    />
  </div>
</template>

<script setup lang="ts">
import type { IBreadcrumbItem } from '../../types';
import { sortWebcams } from '../../lib';

const { t } = useI18n();
const route = useRoute();

/** Тег — сегмент пути (`/webcams/{tag}`), как на боевом движке. */
const tag = computed(() => String(route.params.tag || ''));

/** Теги провайдера приходят слагами (`cheap-privates`) — показываем словами. */
const tagTitle = computed(() => tag.value.replace(/[-_]+/g, ' '));

const [{ data, status }, modelsTotal] = await Promise.all([
  useFetchWebcamModels(tag),
  // счётчик для пункта «Видео» в переключателе разделов
  useFetchModelsCount(),
]);

const { meta, h1 } = useMeta({
  t,
  pageKey: 'webcams',
  brandName: useAppConfig().brandName,
  sortOptions: sortWebcams,
  text: () => tagTitle.value,
  // у страницы тега свой заголовок: без тега шаблон с подстановкой оставлял
  // висячее двоеточие
  h1Key: () => (tag.value ? 'h1_tag' : 'h1'),
});

watchEffect(() => {
  useHead(meta.value);
});

// пути тут без ниши и локали: их подставляет сам UiBreadcrumbs (generateLink)
const breadcrumbs = computed<IBreadcrumbItem[]>(() => [
  {
    name: t('navigation.main'),
    to: '/',
  },
  ...(tag.value
    ? [{ name: t('navigation.webcams'), to: '/webcams' }, { name: tagTitle.value }]
    : [{ name: t('navigation.webcams') }]),
]);
</script>

<style lang="scss">
.webcams__seo {
  margin-bottom: 24px;
}
</style>
